<template>
    <div class="page">
        <div class="header">
            <div class="header-ctl">
                 <router-link to="/my" class="header-ctl-btnLeft">
                    <img src="../assets/back-btn-white.png">
                </router-link>
                <h1 class="header-ctl-title">我的行程</h1>
                <div class="header-ctl-btnRight"></div>
            </div>
            <div class="header-tips">
                <p>快帮行24小时无时差双管家服务，</p>
                <p>只为让您的目的地旅行更安心更省心！</p>
            </div>
        </div>
        <div class="steward" v-if="servant">
            <div class="steward-img">
                <img src="../assets/steward.png" alt="">
            </div>
            <div class="steward-introduce">
                <div class="steward-introduce-title">您的专属行程管家</div>
                <div class="steward-introduce-cs">
                    <span v-if="servant.nicknameInternal">国内：{{servant.nicknameInternal}}</span>
                    <span v-if="servant.wechatInternal">微信号：{{servant.wechatInternal}}</span>
                </div>
                <div class="steward-introduce-cs">
                    <span v-if="servant.nicknameAbroad">目的地： {{servant.nicknameAbroad}}</span>
                    <span v-if="servant.wechatAbroad">微信号： {{servant.wechatAbroad}}</span>
                </div>
            </div>
        </div>
        
        <div class="customList">
            <div class="customList-list" v-for="order in customOrders" :key="order._id">
                <div class="customList-list-orderId">
                    <div class="customList-list-orderId-line">————————————————————————————————</div>
                    <div class="customList-list-orderId-id">客户订单号：{{order.orderId}}</div>
                    <div class="customList-list-orderId-line">————————————————————————————————</div>
                </div>
                <div class="customList-list-title" v-if="order.name">
                    {{order.name}}
                </div>
        
                <div class="customList-list-item" v-for="list in order.dateOrderGroups">
                    <div class="customList-list-item-date">出行日期：{{list.date}}</div>
                    <div class="customList-list-item-card" v-for="item in list.currentDateOrders">
                        <div class="customList-list-item-card-title">
                            <div v-if="item.type4User">{{item.type4User}}</div>
                            <div class="customList-list-item-card-title-orderState" :class="{'pending':item.status4User=='待出行','toBeConfirm':item.status4User=='待完成','confirmed':item.status4User=='已完成'}">{{item.status4User}}</div>
                        </div>
                        <!-- 酒店 -->
                        <div class="customList-list-item-card-info" v-if="item.orderType == 'Hotel'">
                            <div class="customList-list-item-card-info-name">{{item.name}}</div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">城市：</div>
                                <div>{{item.fromCity.name}}</div>
                                <span class="customList-list-item-card-info-form-weather" v-if="item.fromCity && item.fromCity.weather">
                                    明日
                                    {{item.fromCity.weather.tmp_min}}~{{item.fromCity.weather.tmp_max}}℃
                                    <span v-if="item.fromCity.weather.cond_txt_d" class="iconfont" :class="{'icon-yin': item.fromCity.weather.cond_txt_d.indexOf('阴')>-1,'icon-duoyun':item.fromCity.weather.cond_txt_d.indexOf('云')>-1,'icon-zhongyu':item.fromCity.weather.cond_txt_d.indexOf('雨')>-1,'icon-xiaoxue':item.fromCity.weather.cond_txt_d.indexOf('雪')>-1,'icon-qing':item.fromCity.weather.cond_txt_d.indexOf('晴')>-1}"></span>
                                </span>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">服务单号：</div>
                                <div>{{item.orderId}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">入住时间：</div>
                                <div>{{item.startDate}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.vouchers.length" v-for="(attch,_index) in item.vouchers" :key="attch.url">
                                <div class="customList-list-item-card-info-lable">入住单{{_index > 0 ? _index+1 :''}}：</div>
                                <div class="customList-list-item-card-info-attch">
                                    <a :download="attch.originalname" :href="attch.url"><i class="iconfont icon-download"></i> {{attch.originalname}}</a>
                                </div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.supplierConfirmInfo && item.supplierConfirmInfo.length > 0">
                                <div class="customList-list-item-card-info-lable">注意事项：</div>
                                <pre class="customList-list-item-card-info-itinerary">{{item.supplierConfirmInfo}}</pre>
                            </div>
                        </div>
                        <!-- 门票 -->
                        <div class="customList-list-item-card-info" v-if="item.orderType == 'Ticket_POI'">
                            <div class="customList-list-item-card-info-name">{{item.name}}</div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">城市：</div>
                                <div>{{item.fromCity.name}}</div>
                                <span class="customList-list-item-card-info-form-weather" v-if="item.fromCity && item.fromCity.weather">
                                    明日
                                    {{item.fromCity.weather.tmp_min}}~{{item.fromCity.weather.tmp_max}}℃
                                    <span v-if="item.fromCity.weather.cond_txt_d" class="iconfont" :class="{'icon-yin': item.fromCity.weather.cond_txt_d.indexOf('阴')>-1,'icon-duoyun':item.fromCity.weather.cond_txt_d.indexOf('云')>-1,'icon-zhongyu':item.fromCity.weather.cond_txt_d.indexOf('雨')>-1,'icon-xiaoxue':item.fromCity.weather.cond_txt_d.indexOf('雪')>-1,'icon-qing':item.fromCity.weather.cond_txt_d.indexOf('晴')>-1}"></span>
                                </span>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">服务单号：</div>
                                <div>{{item.orderId}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">出行时间：</div>
                                <div>{{item.startDate}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">数量：</div>
                                <div v-if="item.itemCount">{{item.itemCount}}</div>
                                <!-- <div v-if="item.subclassOrder && item.subclassOrder.goods">{{item.subclassOrder.goods.totalnum}}</div> -->
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.vouchers.length" v-for="(attch,_index) in item.vouchers" :key="attch.url">
                                <div class="customList-list-item-card-info-lable">电子凭证{{_index > 0 ? _index+1 :''}}：</div>
                                <div class="customList-list-item-card-info-attch">
                                    <a :download="attch.originalname" :href="attch.url"><i class="iconfont icon-download"></i> {{attch.originalname ? attch.originalname : '点击预览'}}</a>
                                </div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.voucherRequirements">
                                <div class="customList-list-item-card-info-lable">凭证说明：</div>
                                <div v-html="item.voucherRequirements"></div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.supplierConfirmInfo && item.supplierConfirmInfo.length > 0">
                                <div class="customList-list-item-card-info-lable">注意事项：</div>
                                <pre class="customList-list-item-card-info-itinerary">{{item.supplierConfirmInfo}}</pre>
                            </div>
                        </div>
                        <!-- 机票 -->
                        <div class="customList-list-item-card-info" v-if="item.orderType == 'Ticket_AIR'">
                            <div class="customList-list-item-card-info-name">{{item.name}}</div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">城市：</div>
                                <div>{{item.fromCity.name}}</div>
                                <span class="customList-list-item-card-info-form-weather" v-if="item.fromCity && item.fromCity.weather">
                                    明日
                                    {{item.fromCity.weather.tmp_min}}~{{item.fromCity.weather.tmp_max}}℃
                                    <span v-if="item.fromCity.weather.cond_txt_d" class="iconfont" :class="{'icon-yin': item.fromCity.weather.cond_txt_d.indexOf('阴')>-1,'icon-duoyun':item.fromCity.weather.cond_txt_d.indexOf('云')>-1,'icon-zhongyu':item.fromCity.weather.cond_txt_d.indexOf('雨')>-1,'icon-xiaoxue':item.fromCity.weather.cond_txt_d.indexOf('雪')>-1,'icon-qing':item.fromCity.weather.cond_txt_d.indexOf('晴')>-1}"></span>
                                </span>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">服务单号：</div>
                                <div>{{item.orderId}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">出行时间：</div>
                                <div>{{item.startDate}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">数量：</div>
                                <div v-if="item.itemCount">{{item.itemCount}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.vouchers.length" v-for="(attch,_index) in item.vouchers" :key="attch.url">
                                <div class="customList-list-item-card-info-lable">确认单{{_index > 0 ? _index+1 :''}}：</div>
                                <div class="customList-list-item-card-info-attch">
                                    <a :download="attch.originalname" :href="attch.url"><i class="iconfont icon-download"></i> {{attch.originalname}}</a>
                                </div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.supplierConfirmInfo && item.supplierConfirmInfo.length > 0">
                                <div class="customList-list-item-card-info-lable">注意事项：</div>
                                <pre class="customList-list-item-card-info-itinerary">{{item.supplierConfirmInfo}}</pre>
                            </div>
                        </div>
                        <!-- 地接社活动 -->
                        <div class="customList-list-item-card-info" v-if="item.orderType == 'Ticket_FIT'">
                            <div class="customList-list-item-card-info-name">{{item.name}}</div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">城市：</div>
                                <div>{{item.fromCity.name}}</div>
                                <span class="customList-list-item-card-info-form-weather" v-if="item.fromCity && item.fromCity.weather">
                                    明日
                                    {{item.fromCity.weather.tmp_min}}~{{item.fromCity.weather.tmp_max}}℃
                                    <span v-if="item.fromCity.weather.cond_txt_d" class="iconfont" :class="{'icon-yin': item.fromCity.weather.cond_txt_d.indexOf('阴')>-1,'icon-duoyun':item.fromCity.weather.cond_txt_d.indexOf('云')>-1,'icon-zhongyu':item.fromCity.weather.cond_txt_d.indexOf('雨')>-1,'icon-xiaoxue':item.fromCity.weather.cond_txt_d.indexOf('雪')>-1,'icon-qing':item.fromCity.weather.cond_txt_d.indexOf('晴')>-1}"></span>
                                </span>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">服务单号：</div>
                                <div>{{item.orderId}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">出行时间：</div>
                                <div>{{item.startDate}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">数量：</div>
                                <div v-if="item.itemCount">{{item.itemCount}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.vouchers.length" v-for="(attch,_index) in item.vouchers" :key="attch.url">
                                <div class="customList-list-item-card-info-lable">电子凭证{{_index > 0 ? _index+1 :''}}：</div>
                                <div class="customList-list-item-card-info-attch">
                                    <a :download="attch.originalname" :href="attch.url"><i class="iconfont icon-download"></i> {{attch.originalname ? attch.originalname : '点击预览'}}</a>
                                </div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.voucherRequirements">
                                <div class="customList-list-item-card-info-lable">凭证说明：</div>
                                <div v-html="item.voucherRequirements"></div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.supplierConfirmInfo && item.supplierConfirmInfo.length > 0">
                                <div class="customList-list-item-card-info-lable">注意事项：</div>
                                <pre class="customList-list-item-card-info-itinerary">{{item.supplierConfirmInfo}}</pre>
                            </div>
                            <!-- <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">确认单：</div>
                            </div> -->
                        </div>
                        <!-- 物品租赁 -->
                        <div class="customList-list-item-card-info" v-if="item.orderType == 'Rental_Device'">
                            <div class="customList-list-item-card-info-name">{{item.name}}</div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">城市：</div>
                                <div>{{item.fromCity.name}}</div>
                                <span class="customList-list-item-card-info-form-weather" v-if="item.fromCity && item.fromCity.weather">
                                    明日
                                    {{item.fromCity.weather.tmp_min}}~{{item.fromCity.weather.tmp_max}}℃
                                    <span v-if="item.fromCity.weather.cond_txt_d" class="iconfont" :class="{'icon-yin': item.fromCity.weather.cond_txt_d.indexOf('阴')>-1,'icon-duoyun':item.fromCity.weather.cond_txt_d.indexOf('云')>-1,'icon-zhongyu':item.fromCity.weather.cond_txt_d.indexOf('雨')>-1,'icon-xiaoxue':item.fromCity.weather.cond_txt_d.indexOf('雪')>-1,'icon-qing':item.fromCity.weather.cond_txt_d.indexOf('晴')>-1}"></span>
                                </span>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">服务单号：</div>
                                <div>{{item.orderId}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">出行时间：</div>
                                <div>{{item.startDate}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">数量：</div>
                                <div v-if="item.itemCount">{{item.itemCount}}</div>
                            </div>
                            <!-- <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">确认单：</div>
                            </div> -->
                            <div class="customList-list-item-card-info-form" v-if="item.vouchers.length" v-for="(attch,_index) in item.vouchers" :key="attch.url">
                                <div class="customList-list-item-card-info-lable">附件{{_index > 0 ? _index+1 :''}}：</div>
                                <div class="customList-list-item-card-info-attch">
                                    <a :download="attch.originalname" :href="attch.url"><i class="iconfont icon-download"></i> {{attch.originalname}}</a>
                                </div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.supplierConfirmInfo && item.supplierConfirmInfo.length > 0">
                                <div class="customList-list-item-card-info-lable">注意事项：</div>
                                <pre class="customList-list-item-card-info-itinerary">{{item.supplierConfirmInfo}}</pre>
                            </div>
                        </div>
                        <!-- 接机 -->
                        <div class="customList-list-item-card-info" v-if="item.orderSubType == 'Transport_Vehicle_FromAirport'">
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">城市：</div>
                                <div>{{item.fromCity.name}}</div>
                                <span class="customList-list-item-card-info-form-weather" v-if="item.fromCity && item.fromCity.weather">
                                    明日
                                    {{item.fromCity.weather.tmp_min}}~{{item.fromCity.weather.tmp_max}}℃
                                    <span v-if="item.fromCity.weather.cond_txt_d" class="iconfont" :class="{'icon-yin': item.fromCity.weather.cond_txt_d.indexOf('阴')>-1,'icon-duoyun':item.fromCity.weather.cond_txt_d.indexOf('云')>-1,'icon-zhongyu':item.fromCity.weather.cond_txt_d.indexOf('雨')>-1,'icon-xiaoxue':item.fromCity.weather.cond_txt_d.indexOf('雪')>-1,'icon-qing':item.fromCity.weather.cond_txt_d.indexOf('晴')>-1}"></span>
                                </span>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">服务单号：</div>
                                <div>{{item.orderId}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">出行时间：</div>
                                <div v-if="item.subclassOrder &&item.subclassOrder.details">{{item.subclassOrder.details.timeStr2}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">航班号：</div>
                                <div v-if="item.subclassOrder && item.subclassOrder.details">{{item.subclassOrder.details.flightNo}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">出发地：</div>
                                <div v-if="item.subclassOrder && item.subclassOrder.details && item.subclassOrder.details.from.knownPlace">{{item.subclassOrder.details.from.knownPlace.name}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">目的地：</div>
                                <div v-if="item.subclassOrder && item.subclassOrder.details && item.subclassOrder.details.to.arbitrary">{{item.subclassOrder.details.to.arbitrary.text}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">车型：</div>
                                <div v-if="item.subclassOrder &&item.subclassOrder.details">{{item.subclassOrder.details.carTypeStr}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.subclassOrder &&item.subclassOrder.details &&item.subclassOrder.details.itinerary">
                                <div class="customList-list-item-card-info-lable">行程路线：</div>
                                <pre class="customList-list-item-card-info-itinerary">{{item.subclassOrder.details.itinerary}}</pre>
                            </div>
                        </div>
                        <!-- 送机 -->
                        <div class="customList-list-item-card-info" v-if="item.orderSubType == 'Transport_Vehicle_ToAirport'">
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">城市：</div>
                                <div>{{item.fromCity.name}}</div>
                                <span class="customList-list-item-card-info-form-weather" v-if="item.fromCity && item.fromCity.weather">
                                    明日
                                    {{item.fromCity.weather.tmp_min}}~{{item.fromCity.weather.tmp_max}}℃
                                    <span v-if="item.fromCity.weather.cond_txt_d" class="iconfont" :class="{'icon-yin': item.fromCity.weather.cond_txt_d.indexOf('阴')>-1,'icon-duoyun':item.fromCity.weather.cond_txt_d.indexOf('云')>-1,'icon-zhongyu':item.fromCity.weather.cond_txt_d.indexOf('雨')>-1,'icon-xiaoxue':item.fromCity.weather.cond_txt_d.indexOf('雪')>-1,'icon-qing':item.fromCity.weather.cond_txt_d.indexOf('晴')>-1}"></span>
                                </span>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">服务单号：</div>
                                <div>{{item.orderId}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">出行时间：</div>
                                <div v-if="item.subclassOrder &&item.subclassOrder.details">{{item.subclassOrder.details.timeStr2}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">航班号：</div>
                                <div v-if="item.subclassOrder && item.subclassOrder.details">{{item.subclassOrder.details.flightNo}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">出发地：</div>
                                <div v-if="item.subclassOrder && item.subclassOrder.details && item.subclassOrder.details.from.arbitrary">{{item.subclassOrder.details.from.arbitrary.text}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">目的地：</div>
                                <div v-if="item.subclassOrder && item.subclassOrder.details && item.subclassOrder.details.to.knownPlace">{{item.subclassOrder.details.to.knownPlace.name}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">车型：</div>
                                <div v-if="item.subclassOrder &&item.subclassOrder.details">{{item.subclassOrder.details.carTypeStr}}</div>                                
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.subclassOrder &&item.subclassOrder.details &&item.subclassOrder.details.itinerary">
                                <div class="customList-list-item-card-info-lable">行程路线：</div>
                                <pre class="customList-list-item-card-info-itinerary">{{item.subclassOrder.details.itinerary}}</pre>
                            </div>
                        </div>
                        <!-- 单程接送 -->
                        <div class="customList-list-item-card-info" v-if="item.orderSubType == 'Transport_Vehicle_ShortDistance'">
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">城市：</div>
                                <div>{{item.fromCity.name}}</div>
                                <span class="customList-list-item-card-info-form-weather" v-if="item.fromCity && item.fromCity.weather">
                                    明日
                                    {{item.fromCity.weather.tmp_min}}~{{item.fromCity.weather.tmp_max}}℃
                                    <span v-if="item.fromCity.weather.cond_txt_d" class="iconfont" :class="{'icon-yin': item.fromCity.weather.cond_txt_d.indexOf('阴')>-1,'icon-duoyun':item.fromCity.weather.cond_txt_d.indexOf('云')>-1,'icon-zhongyu':item.fromCity.weather.cond_txt_d.indexOf('雨')>-1,'icon-xiaoxue':item.fromCity.weather.cond_txt_d.indexOf('雪')>-1,'icon-qing':item.fromCity.weather.cond_txt_d.indexOf('晴')>-1}"></span>
                                </span>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">服务单号：</div>
                                <div>{{item.orderId}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">出行时间：</div>
                                <div v-if="item.subclassOrder &&item.subclassOrder.details">{{item.subclassOrder.details.timeStr2}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">出发地：</div>
                                <div v-if="item.subclassOrder && item.subclassOrder.details && item.subclassOrder.details.from.arbitrary">{{item.subclassOrder.details.from.arbitrary.text}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">目的地：</div>
                                <div v-if="item.subclassOrder && item.subclassOrder.details && item.subclassOrder.details.to.arbitrary">{{item.subclassOrder.details.to.arbitrary.text}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">车型：</div>
                                <div v-if="item.subclassOrder &&item.subclassOrder.details">{{item.subclassOrder.details.carTypeStr}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.subclassOrder &&item.subclassOrder.details &&item.subclassOrder.details.itinerary">
                                <div class="customList-list-item-card-info-lable">行程路线：</div>
                                <pre class="customList-list-item-card-info-itinerary">{{item.subclassOrder.details.itinerary}}</pre>
                            </div>
                        </div>
                        <!-- 包车 -->
                        <div class="customList-list-item-card-info" v-if="item.orderSubType == 'Transport_Vehicle_Day'">
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">城市：</div>
                                <div>{{item.fromCity.name}}</div>
                                <span class="customList-list-item-card-info-form-weather" v-if="item.fromCity && item.fromCity.weather">
                                    明日
                                    {{item.fromCity.weather.tmp_min}}~{{item.fromCity.weather.tmp_max}}℃
                                    <span v-if="item.fromCity.weather.cond_txt_d" class="iconfont" :class="{'icon-yin': item.fromCity.weather.cond_txt_d.indexOf('阴')>-1,'icon-duoyun':item.fromCity.weather.cond_txt_d.indexOf('云')>-1,'icon-zhongyu':item.fromCity.weather.cond_txt_d.indexOf('雨')>-1,'icon-xiaoxue':item.fromCity.weather.cond_txt_d.indexOf('雪')>-1,'icon-qing':item.fromCity.weather.cond_txt_d.indexOf('晴')>-1}"></span>
                                </span>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">服务单号：</div>
                                <div>{{item.orderId}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">出行时间：</div>
                                <div v-if="item.subclassOrder &&item.subclassOrder.details">{{item.subclassOrder.details.timeStr2}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">出发地：</div>
                                <div v-if="item.subclassOrder && item.subclassOrder.details && item.subclassOrder.details.from.arbitrary">{{item.subclassOrder.details.from.arbitrary.text}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">目的地：</div>
                                <div v-if="item.subclassOrder && item.subclassOrder.details && item.subclassOrder.details.to && item.subclassOrder.details.to.arbitrary">{{item.subclassOrder.details.to.arbitrary.text}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">车型：</div>
                                <div v-if="item.subclassOrder &&item.subclassOrder.details">{{item.subclassOrder.details.carTypeStr}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.subclassOrder &&item.subclassOrder.details &&item.subclassOrder.details.itinerary">
                                <div class="customList-list-item-card-info-lable">行程路线：</div>
                                <pre class="customList-list-item-card-info-itinerary">{{item.subclassOrder.details.itinerary}}</pre>
                            </div>
                        </div>
                        <!-- 定制包车 -->
                        <div class="customList-list-item-card-info" v-if="item.orderSubType == 'Transport_Vehicle_CustomTrip' || item.orderSubType == 'Transport_Vehicle_Other'">
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">城市：</div>
                                <div>{{item.fromCity.name}}</div>
                                <span class="customList-list-item-card-info-form-weather" v-if="item.fromCity && item.fromCity.weather">
                                    明日
                                    {{item.fromCity.weather.tmp_min}}~{{item.fromCity.weather.tmp_max}}℃
                                    <span v-if="item.fromCity.weather.cond_txt_d" class="iconfont" :class="{'icon-yin': item.fromCity.weather.cond_txt_d.indexOf('阴')>-1,'icon-duoyun':item.fromCity.weather.cond_txt_d.indexOf('云')>-1,'icon-zhongyu':item.fromCity.weather.cond_txt_d.indexOf('雨')>-1,'icon-xiaoxue':item.fromCity.weather.cond_txt_d.indexOf('雪')>-1,'icon-qing':item.fromCity.weather.cond_txt_d.indexOf('晴')>-1}"></span>
                                </span>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">服务单号：</div>
                                <div>{{item.orderId}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">出行时间：</div>
                                <div v-if="item.subclassOrder &&item.subclassOrder.details">{{item.subclassOrder.details.timeStr2}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">出发地：</div>
                                <div v-if="item.subclassOrder && item.subclassOrder.details && item.subclassOrder.details.from.arbitrary">{{item.subclassOrder.details.from.arbitrary.text}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">目的地：</div>
                                <div v-if="item.subclassOrder && item.subclassOrder.details && item.subclassOrder.details.to && item.subclassOrder.details.to.arbitrary">{{item.subclassOrder.details.to.arbitrary.text}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form">
                                <div class="customList-list-item-card-info-lable">车型：</div>
                                <div v-if="item.subclassOrder &&item.subclassOrder.details">{{item.subclassOrder.details.carTypeStr}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.subclassOrder &&item.subclassOrder.details &&item.subclassOrder.details.itinerary">
                                <div class="customList-list-item-card-info-lable">行程路线：</div>
                                <!-- <div class="customList-list-item-card-info-itinerary" v-html="item.subclassOrder.details.itinerary.replace(/\s\s/g,'<br/>')"></div> -->
                                <pre class="customList-list-item-card-info-itinerary">{{item.subclassOrder.details.itinerary}}</pre>
                            </div>
                        </div>
                        <!-- 供应商信息 -->
                        <div class="customList-list-item-card-supplier" v-if="item.startingTime || item.supplierPhoneNumber || item.departurePoint || item.notes || item.pickupHotelName || item.departurePointAddress || item.departurePointDirections">
                            <div class="customList-list-item-card-supplier-title">服务信息</div>
                            <div class="customList-list-item-card-info-form" v-if="item.supplierPhoneNumber">
                                <div class="customList-list-item-card-info-lable">服务商电话：</div>
                                <div><a :href="'tel:'+item.supplierPhoneNumber">{{item.supplierPhoneNumber}}</a></div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.startingTime">
                                <div class="customList-list-item-card-info-lable">活动开始时间：</div>
                                <div>{{item.startingTime}}</div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.pickupHotelName">
                                <div class="customList-list-item-card-info-lable">酒店名称：</div>
                                <div v-html="getTheMaps(item.pickupHotelName)"></div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.departurePoint">
                                <div class="customList-list-item-card-info-lable">集合点：</div>
                                <div v-html="item.departurePoint"></div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.departurePointDirections">
                                <div class="customList-list-item-card-info-lable">集合点指引：</div>
                                <div v-html="item.departurePointDirections"></div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.departurePointAddress">
                                <div class="customList-list-item-card-info-lable">集合点地址：</div>
                                <div v-html="getTheMaps(item.departurePointAddress)"></div>
                            </div>
                            <div class="customList-list-item-card-info-form" v-if="item.notes">
                                <div class="customList-list-item-card-info-lable">出行提示：</div>
                                <div v-html="item.notes"></div>
                            </div>
                        </div>
                        <!-- 司导信息 -->
                        <div class="customList-list-item-card-driver" v-if="item.subclassOrder && item.subclassOrder.driver">
                            <div class="customList-list-item-card-driver-title">司导负责人：</div>
                            <div>
                                <span v-if="item.subclassOrder && item.subclassOrder.driver && item.subclassOrder.driver.driver">{{item.subclassOrder.driver.driver.profile.name}} </span>
                                <span v-if="item.subclassOrder && item.subclassOrder.driver && item.subclassOrder.driver.driver"> {{item.subclassOrder.driver.driver.username}}</span>
                            </div>
                        </div>
                        <!-- 出行须知 -->
                        <div class="noticeWrap" v-if="item.notice && Object.keys(item.notice).length">
                            <div class="noticeWrap-title">出行须知</div>
                            <div>
                                <ol>
                                    <li v-if="item.notice && item.notice.free_wait_time" v-html="'<strong>免费等待时长</strong>'+item.notice.free_wait_time+'分钟'"></li>
                                    <li v-if="item.notice && item.notice.child_seat_desc" v-html="'<strong>儿童安全座椅</strong>'+item.notice.child_seat_desc"></li>
                                    <li v-if="item.notice && item.notice.tips_notice" v-html="'<strong>小费相关说明</strong>'+item.notice.tips_notice"></li>
                                    <li v-if="item.notice && item.notice.exchange_ticket_notice"  v-html="'<strong>门票相关说明</strong>'+item.notice.exchange_ticket_notice"></li>
                                    <li v-if="item.notice && item.notice.trip_notice"  v-html="'<strong>行程信息说明</strong>'+item.notice.trip_notice"></li>
                                    <li v-if="item.notice && item.notice.hotel_notice"  v-html="'<strong>酒店信息说明</strong>'+item.notice.hotel_notice"></li>
                                    <li v-if="item.notice && item.notice.airport_notice"  v-html="'<strong>接送机信息说明</strong>'+item.notice.airport_notice"></li>
                                    <li v-if="item.notice && item.notice.clothing_notice"  v-html="'<strong>穿衣提醒</strong>'+item.notice.clothing_notice"></li>
                                </ol>
                            </div>
                        </div>
                        <!-- 文章攻略 -->
                        <router-link :to="'/article/'+item.article.id" class="customList-list-item-card-strategy" v-if="item.article">
                            <img :src="/^(http|https):\/\//.test(item.article.filepath) ? item.article.filepath : url+item.article.filepath" alt="">
                            <span>{{item.article.title}}</span>
                        </router-link>
                        <!-- 打分 -->
                        <div v-if="item.rates && item.rates.length" class="customList-list-item-card-rates">
                            <div v-for="rateItem in item.rates" class="customList-list-item-card-rates-list">
                                    <div class="customList-list-item-card-rates-list-lable">{{rateItem.ratingItem}}</div>
                                    <Rate v-model='rateItem.ratingValue'>
                                    <!-- <span>{{rateItem.ratingValue}}</span> -->
                                    </Rate>
                            </div>
                            <div class="customList-list-item-card-rates-submit" @click="setRatesByOrder(item)">提交</div>
                        </div>
                    </div>
                </div>
            </div>
           
        </div>
        <router-link to="/"  class="goHome" >
                <img class="list-item-arr" src="../assets/go-home.jpg"/>
        </router-link>
        <div class="h120"></div>
        <div class="list">
            <form @submit.prevent="formSubmit">
                <div class="list-item">
                    <div class="list-item-input">
                        <input name="name1"  type="text" maxlength="11" v-model="keywords" placeholder="请输入需要查询的CODE"/>
                    </div>
                </div>
                <div class="incomeSubmit">
                    <input type="submit" class="incomeSubmit-btn"  value="立即查询"/>
                </div>
            </form>
        </div>
        <div class="program-about">
            <img  class="program-about-img" src="../assets/my-program-about.png" alt="" >
        </div>
    </div>
</template>

<script>
    import { Toast,MessageBox  } from 'mint-ui';
    import config from '../store/config';
    import wxShare from "../store/wxShare"
    import Rate from '../components/Rate';
    export default {
        name: "My-income-auth",
        components:{
            Rate
        },
        data() {
            return {
                url:config.url,
                keywords:'',
                customOrders:[],
                servant:null,
                value:2,
                singleCustomOrder: ''
            }
        },
        methods: {
            getTheMaps(val){
                let _html = `<a style="text-decoration: underline;" href="https://www.google.com/maps/search/?api=1&query=${val.replace(/<br>/gi,'+')}">${val}</a>`;
                return _html;
            },
            formSubmit: function () {
                var _that = this;
                if (!_that.keywords) {
                    Toast({message:'请输入需要查询的CODE', duration: 1000});
                    return false;
                }
                _that.axios.post('waptripcdk',{cdk:_that.keywords})
                    .then(res => {
                        this.$router.push({path:"/my-program-show/"+res.data.trip_id})
                    })
                    .catch(err => console.log(err));
            },
            getCustomOrder: function () {
                var _that = this;
                _that.axios.post('/api/kbx_order/kbx_custom_order',{})
                    .then(res => {
                        this.customOrders = res.data.orders;
                        this.servant = res.data.servant;
                    })
                    .catch(err => console.log(err));
            },
            getOrderDetailByOrderId: function () {
                var _that = this;
                let params = {
                    order_no: this.singleCustomOrder
                }
                _that.axios.post('/api/kbx_order/getOrderDetailByOrderIdWithWx',params)
                    .then(res => {
                        this.customOrders = [res.data];
                        this.servant = res.data.servant;
                    })
                    .catch(err => console.log(err));
            },
            setRatesByOrder(item){
                let params = {
                    order_id:item._id,
                    rates:JSON.stringify(item.rates),
                };
                this.axios.post('/api/kbx_order/kbx_grade_custom_order',params)
                    .then(res => {
                        this.getCustomOrder();
                         MessageBox({
                                title: '提示',
                                message: "服务评价成功！感谢您的评价与支持！",
                                confirmButtonText:'确定',
                                showCancelButton: false,
                                closeOnClickModal:false,
                            }).then(res=>{
                                if(res=='confirm'){
                                    
                                }else{
                                    return;
                                }
                            });
                    })
                    .catch(err => console.log(err));
            },
            share() {
                wxShare({title: '我的行程-查询行程', debug: false}, function () {
                    console.log('分享成功')
                });
            }
        },
        mounted(){
            if(this.$route.query.order){
                this.singleCustomOrder = this.$route.query.order
                this.getOrderDetailByOrderId();
            }else{
                this.getCustomOrder();
            }
            window.scrollTo(0,0);
            this.share();
        }
    }
</script>

<style lang="scss" scoped>

    @import "../assets/base";

    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(60);
        background: $bgcolor1;
    }
    .page{
        background: #E8EBF1;
        min-height: 100%;
        color: #333333;
    }

    .header{
        background:#F58033;
        color: #FFFFFF;
        padding-bottom:rpx(30);
        &-ctl{
            display: flex;
            align-items: center;
            padding:rpx(10) rpx(30);
            justify-content: space-between;
            &-btnLeft{
                width: rpx(64);
                height: rpx(64);
                padding-top: rpx(16);
                img{
                    width: rpx(32);
                    height: rpx(32);
                }
            }
            &-btnRight:after{
                display: block;
                content: ' ';
                width: rpx(64);
                height: rpx(64);
            }
            &-title{
                flex: 1;
                font-size: rpx(36);
                text-align: center;
                font-weight: normal;
            }
        }
        &-tips{
            text-align: center;
            p{
                line-height: 1.3;
            }
        }
    }
    .steward{
        margin: rpx(30);
        padding: rpx(20) rpx(10);
        background: $color0;
        border-radius: rpx(10);
        display: flex;
        justify-content: start;
        align-items: center;
        &-img{
            width: rpx(100);
            margin: rpx(20);
            img{
                width: 100%;
            }
        }
        &-introduce{
            font-size: rpx(26);
            line-height: 1.4;
            flex: 1;
            &-title{
                font-size: rpx(36);
                font-weight: 500;
            }
            &-cs{
                margin-right: rpx(20);
                display: flex;
                justify-content: space-between;
            }
        }
    }
    .noticeWrap{
        margin: rpx(20) rpx(20);
        padding: rpx(20) 0;
        border-top: dotted 1px #606162;
        border-bottom: dotted 1px #606162;
        background: $color0;
        .noticeWrap-title{
            font-size: rpx(36);
            color: #FB7D33;
        }
        ol{
            // list-style-type: circle;
            margin-top: rpx(20);
            // padding-left: rpx(40);
            li{
                margin-bottom: rpx(15);
                line-height: 1.3;
            }
        }
    }
    .customList{
        &-list{
            margin-top: rpx(20);
            &-orderId{
                display: flex;
                justify-content:space-around;
                align-items: center;
                &-line{
                    overflow: hidden;
                }
                &-id{
                    white-space: nowrap;
                    text-align: center;
                    font-size: rpx(26);
                    padding: 0 rpx(10);
                }
            }
            &-title {
                margin: 0 rpx(30);
                font-size: rpx(30);
                padding-top: rpx(20);
                color: #FB7D33;
                line-height: 130%;
            }
            &-item {
                &-date {
                    display: block;
                    padding: rpx(10);
                    font-size: rpx(28);
                    margin: rpx(20) auto;
                    // color: #ff5722;
                    width: rpx(340);
                    border-radius: rpx(170);
                    color: #ffffff;
                    text-align: center;
                    background: #F18047;
                    // line-height: 130%;
                }
                &-card {
                    margin: rpx(30);
                    background: $color0;
                    border-radius: rpx(10);
                    &-title {
                        font-size: rpx(36);
                        padding: rpx(20) rpx(20);
                        display: flex;
                        justify-content:space-between;
                        align-items: center;
                        &-orderState{
                            font-size: rpx(26);
                            padding: rpx(10);
                            border-radius: rpx(5);
                            border: 1px solid #333333;
                        }
                    }
                    &-info{
                        padding: rpx(20) 0;
                        margin: 0 rpx(20);
                        border-top: dotted 1px #606162;
                        // border-bottom: solid 1px #F1F1F1;
                        &-name{
                            font-size: rpx(34);
                            margin: rpx(10) 0;
                        }
                        &-form{
                            line-height: 1.4;
                            margin: rpx(5) 0;
                            font-size: rpx(28);
                            display: flex;
                            justify-content: flex-start;
                            position: relative;
                            &-weather {
                                position: absolute;
                                right: rpx(-20);
                                font-size: rpx(27);
                                // color: $color0;
                                min-width: rpx(140);
                                border-top-left-radius: rpx(70);
                                border-bottom-left-radius: rpx(70);
                                padding: rpx(4) rpx(20);
                                background: #EDEEEF;
                                span{
                                    font-weight: bolder;
                                }
                            }
                        }
                        &-lable{
                            color: #949596;
                            min-width: rpx(160);
                        }
                        &-itinerary{
                            white-space:pre-wrap; /* css3.0 */ 
                            white-space:-moz-pre-wrap; /* Firefox */ 
                            white-space:-o-pre-wrap; /* Opera 7 */ 
                            word-wrap:break-word; /* Internet Explorer 5.5+ */ 
                        }
                        &-attch{
                            a{
                                color: #FA8033;
                                i.iconfont{
                                    font-size: rpx(24);
                                }
                            }
                            
                        }
                    }
                    &-rates{
                        padding: rpx(20) 0;
                        margin: 0 rpx(20);
                        border-top: dotted 1px #606162;
                        &-list{
                            // line-height: 2.5;
                            justify-content: flex-start;
                            display: flex;
                            align-items: center;
                            margin-top: rpx(10);
                            &-lable{
                                margin-right: rpx(50);
                            }
                        }
                        &-submit{
                            margin: rpx(20) 0 rpx(10) 0;
                            width: 100%;
                            height: rpx(60);
                            background: #F58033;
                            color: #ffffff;
                            text-align: center;
                            line-height: rpx(60);
                            border-radius: rpx(6);
                        }
                    }
                    &-driver{
                        padding: rpx(20) 0;
                        margin: 0 rpx(20);
                        border-top: dotted 1px #606162;
                        font-size: rpx(27);
                        line-height: 1.6;
                        &-title{
                            font-size: rpx(30);
                        }
                    }
                    &-supplier{
                        padding: rpx(20) 0;
                        margin: 0 rpx(20);
                        border-top: dotted 1px #606162;
                        font-size: rpx(27);
                        line-height: 1.6;
                        a{
                            color: rgb(0, 0, 238);
                        }
                        &-title{
                            font-size: rpx(30);
                        }
                    }
                    &-strategy{
                        padding: rpx(20) 0;
                        margin: 0 rpx(20);
                        display: flex;
                        align-items: center;
                        img{
                            width: rpx(155);
                            height: rpx(100);
                            margin-right: rpx(20);
                        }
                    }
                    
                }
            }
           
        }
    }
    .goHome{
        display: inline-block;
        margin: rpx(30);
        img{
            width: 100%;
        }
    }


    //项列表
    .list {
        margin: rpx(30);
        &-item {
            display: flex;
            align-items: center;
            overflow: hidden;
            background: $color0;
            padding:rpx(35) rpx(30);
            &-input {
                flex: 1;
                display: flex;
                align-items: center;
                font-size: rpx(34);
                input{
                    width: 100%;
                    font-size: rpx(34);
                }
            }
        }
    }
    .incomeSubmit{
        padding: rpx(60) 0 ;
        &-btn{
            display: block;
            width: 100%;
            height: rpx(100);
            line-height: rpx(100);
            background: $color3;
            border-radius: $radius6;
            color: $color0;
            font-size: rpx(34);
            text-align: center;
        }
    }

    .program-about{
        padding: rpx(30);
        &-img{
            width: 100%;
            height: auto;
        }
    }
    .pending{
        border: 1px solid #3EAC45!important;
        color: #3EAC45!important;
    }
    .toBeConfirm{
        border: 1px solid #F36C20!important;
        color: #F36C20!important;
    }
    .confirmed{
        border: 1px solid #B6B7B8!important;
        color: #B6B7B8!important;
    }

</style>